import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'
import NewsView from '@/views/NewsView.vue'
import DetailsView from '@/views/DetailsView.vue'
import LoginView from '@/views/LoginView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
      meta:{title:'首页'}
    },
    {
      path: '/about',
      name: 'about',
      // 要想ab生效，从此写components
      components: {ab:AboutView},
      meta:{title:'关于我们'}
    },
    {
      path: '/news',
      name: 'news',
      component: NewsView,
      children: [
        {
          //query传参方式的路径
          //path: 'details',

          //params传参方式的路径
          path: 'details/:id/:title/:content',
          name: 'details',
          component: DetailsView
        }
      ],
      meta:{title:'新闻'}
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      meta:{title:'登录'}
    }
  ],
})


//定义全局路由守卫  - 前置路由守卫
router.beforeEach((to,from)=>{
  console.log('全局路由守卫')

  console.log(to)
  console.log(from)
  //return false;//阻止路由跳转
  return true;//允许路由跳转

})

//定义全局路由守卫  - 后置路由守卫
router.afterEach((to,from)=>{
  console.log('后置路由守卫')
  console.log(to)
  console.log(from)
  //修改页面标题
  document.title = (to.meta.title || '欢迎' ) as string
  return true;
})

export default router
